import { List, Loading, PullRefresh } from "@taroify/core";
import { usePageScroll } from "@tarojs/taro";
import React, { useRef, useState } from "react";
import RiskQueryItem from "../RiskQueryItem";

const mockData = [
  {
    id: "1",
    level: "A",
    title:
      "检验检查酸价（以脂肪计）（KOH）检验的值,检验检查酸价（以脂肪计）（KOH）检验的值",
    source: "市场监督局",
  },
  {
    id: "2",
    level: "B",
    title: "原辅料及产品出入库记录不规范或内容缺失，无法查找。",
    source: "市场监督局",
  },
  {
    id: "3",
    level: "B",
    title: "原辅料及产品出入库记录不规范或内容缺失，无法查找。",
    source: "市场监督局",
  },
  {
    id: "4",
    level: "B",
    title: "原辅料及产品出入库记录不规范或内容缺失，无法查找。",
    source: "市场监督局",
  },
  {
    id: "5",
    level: "B",
    title: "原辅料及产品出入库记录不规范或内容缺失，无法查找。",
    source: "市场监督局",
  },
  {
    id: "6",
    level: "B",
    title: "原辅料及产品出入库记录不规范或内容缺失，无法查找。",
    source: "市场监督局",
  },
  {
    id: "7",
    level: "B",
    title: "原辅料及产品出入库记录不规范或内容缺失，无法查找。",
    source: "市场监督局",
  },
  {
    id: "8",
    level: "B",
    title: "原辅料及产品出入库记录不规范或内容缺失，无法查找。",
    source: "市场监督局",
  },
  {
    id: "9",
    level: "B",
    title: "原辅料及产品出入库记录不规范或内容缺失，无法查找。",
    source: "市场监督局",
  },
  {
    id: "10",
    level: "B",
    title: "原辅料及产品出入库记录不规范或内容缺失，无法查找。",
    source: "市场监督局",
  },
];

const RiskQueryList: React.FC = () => {
  const [hasMore, setHasMore] = useState(true);
  const [list, setList] = useState<Record<string, any>[]>(mockData);
  const [loading, setLoading] = useState(false);
  const refreshingRef = useRef(false);
  const [reachTop, setReachTop] = useState(true);

  usePageScroll(({ scrollTop: aScrollTop }) => {
    setReachTop(aScrollTop === 0);
  });

  const onLoad = () => {
    // setLoading(true);
    // const newList = refreshingRef.current ? [] : list;
    // setTimeout(() => {
    //   // refreshingRef.current = false;
    //   // for (let i = 0; i < 10; i++) {
    //   //   const text = newList.length + 1;
    //   //   newList.push(text < 10 ? "0" + text : String(text));
    //   // }
    //   // setList(newList);
    //   // setLoading(false);
    //   // setHasMore(newList.length < 40);
    // }, 1000);
  };

  function onRefresh() {
    refreshingRef.current = true;
    setLoading(false);
    onLoad();
  }

  return (
    <PullRefresh
      loading={refreshingRef.current}
      reachTop={reachTop}
      onRefresh={onRefresh}
    >
      <List
        loading={loading}
        hasMore={hasMore}
        onLoad={onLoad}
        className="flex flex-col gap-2 flex-nowrap"
      >
        {list.map((item: any) => (
          <RiskQueryItem key={item.id} item={item} />
        ))}
        {!refreshingRef.current && (
          <List.Placeholder>
            {loading && <Loading>加载中...</Loading>}
            {!hasMore && "没有更多了"}
          </List.Placeholder>
        )}
      </List>
    </PullRefresh>
  );
};

export default RiskQueryList;
